<template>
  <div>
    <head-top routerName="myOrderManagement" title="我的订单"></head-top>
    <div class="content-wrap">
      <van-tabs v-model="status" @click="tabClick">
        <template v-for="(item, index) in nav">
          <van-tab
            :title="item.label"
            :key="item.status"
            :name="item.navCurrentStatus"
            v-if="index < 5"
          ></van-tab>
        </template>
      </van-tabs>
      <div class="list">
        <van-pull-refresh
          v-model="refreshing"
          success-text="刷新成功"
          @refresh="onLoad"
        >
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <ul>
              <template v-for="(item, index) in list">
                <li
                  :key="index"
                   v-if="formatList(item.status)"
                  @click="detailsShow(item)"
                >
                  <goods-content
                    :item="item"
                    button
                    @load="onLoad"
                    @showPay="showPay"
                  ></goods-content>
                </li>
              </template>
              <goods-null
                v-if="isListNull && !loading"
                describe="您还没有相关商品"
              ></goods-null>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <password-input ref="password" @BuyData="addPayGoodsOrder"></password-input>
  </div>
</template>
<script> 
import { Tab, Tabs, Image as VanImage, Toast, PullRefresh,List, } from "vant";
import HeadTop from "@/components/head";
import goodsContent from "./goods-content";
import goodsNull from "@/components/null/goodsNull";
import { statusList } from "./statusList";
import { userOrder } from "@/api/myOrderManagement";
import { payGoodsOrder } from "@/api/market";
import md5 from "js-md5";

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    HeadTop,
    goodsContent,
    goodsNull,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
  },
  data() {
    return {
      status: ["0","1","2","3","5","6","7"],
      nav: statusList(),
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      orderNo: "",
    };
  },
  computed: {
    formatList() {
      return function (status) {
        return this.status.indexOf(status) !== -1;
      };
    },
    isListNull() {
      return !this.list.some((item) =>
        this.status.some((ele) => ele === item.status)
      );
    },
  },
  methods: {
    onLoad() {
      userOrder({}).then((res) => {
        this.loading = false;
        this.refreshing = false;
        this.finished = true;
        this.list = res.data.resultData;
        console.log(this.list);
      });
    },
    tabClick(status) {
      this.status = status;
    },
    detailsShow(query) {
      this.$router.push({ name: "myOrderManagementDetails", query })
    },
    showPay(orderNo) {
      this.orderNo = orderNo;
      this.$refs.password.show();
    },
    addPayGoodsOrder(Password) {
      var data = {
        payPassword: md5(Password),
        orderNo: this.orderNo,
      };
      payGoodsOrder(data).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          this.onLoad(); 
          Toast.success(res.data.errorMessage);
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
  },
  watch: {
    $route(to, from) {
      if(to.meta.index === 1 ){
        // this.onLoad()
      }
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-pull-refresh {
    overflow: inherit;
    /deep/.van-pull-refresh__track {
      min-height: 70vh;
    }
  }
  /deep/.van-loading {
    margin: 0;
  }
  .van-tabs {
    z-index: 2;
    /deep/.van-tabs__nav {
      padding: 0;
      .van-tab {
        padding: 0;
        .van-tab__text {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
        &.van-tab--active {
          span {
            font-weight: bold;
          }
        }
      }
      .van-tabs__line {
        bottom: 8px;
        height: 2px;
        max-width: 16px;
        border-radius: 0;
        background: #333333;
      }
    }
  }
  .list {
    position: relative;
    z-index: 1;
    ul {
      li {
        margin-top: 13px;
      }
    }
  }
}
</style>